<template>
  <el-row>
    <el-col>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>数据仓库</el-breadcrumb-item>
        <el-breadcrumb-item>菜单信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card shadow="hover">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form :inline="true" class="query-form-inline" @submit.prevent>
              <el-input
                v-model="queryInfo"
                placeholder="菜单信息检索"
                :prefix-icon="Search"
                @keyup.enter="query"
              />
            </el-form>
            <ElmMenuTree
              class="main-scrollbar"
              :data="menuData"
              :loading="menuDataLoading"
              @edit="edit"
              @move="move"
              @refresh="query"
            />
          </el-col>
          <transition name="el-zoom-in-top">
            <el-col v-show="editShow" :span="16">
              <ElmMenuEdit
                v-model:menu="menu"
                @commit="commit"
                @cancel="cancel"
              />
            </el-col>
          </transition>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ArrowRight, Search } from "@element-plus/icons-vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import { MenuApi, MenuPostApi } from "@/apis/home";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Menu } from "@/components/elm/ElmMenuEdit.vue";
import { CalulerTreeOrdernn } from "@/lib/comm";

const menuData = ref<Menu[]>(),
  menuDataLoading = ref(true),
  menu = ref<Menu>(),
  editShow = ref(false),
  queryInfo = ref("");

const query = () => {
    menuDataLoading.value = true;
    let params: string[] = [];
    if (queryInfo.value) {
      params.push("Name=" + queryInfo.value);
    }
    MenuApi("?" + params.join("&"), false, true).then((res) => {
      if (200 == res.status && 200 == res.data.code) {
        if (res.data.data && res.data.data.list) {
          res.data.data.list.forEach(mkMenuTree);
          menuData.value = res.data.data.list;
          menuDataLoading.value = false;
        }
      }
    });
  },
  // 整理成树
  mkMenuTree = (item: any) => {
    if (item.items && 0 < item.items.length) {
      item.items.forEach(mkMenuTree);
      item.children = item.items;
      delete item.items;
    }
  },
  move = (node1: Node, node2: Node, local: string) => {
    let menu1 = CalulerTreeOrdernn(
      node1,
      node2,
      local,
      menuData.value,
      (d: any): boolean => {
        if (d.router.path) {
          ElMessage.warning("页面菜单不能添加子菜单！");
          query();
          return true;
        }
        return false;
      }
    );
    if (!menu1) {
      return;
    }
    ElMessageBox.confirm("确认移动菜单节点么？", "移动确认", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        MenuPostApi(menu1)
          .then((res) => {
            if (200 == res.status && 200 == res.data.code) {
              menu1 = res.data.data;
              ElMessage.success("保存成功！");
              query();
            } else {
              ElMessage.error(res.data.msg);
            }
          })
          .catch((err) => {
            ElMessage.error("保存出现错误！");
          });
      })
      .catch(() => {
        query();
        ElMessage.info("取消移动");
      });
  },
  edit = (m: Menu) => {
    if (m) menu.value = { ...m };
    else menu.value = ref<Menu>().value;
    editShow.value = true;
  },
  commit = () => {
    query();
  },
  cancel = () => {
    editShow.value = false;
    query();
  };

query();
</script>

<style scoped>
.el-breadcrumb {
  margin-left: 8px;
  margin-bottom: 18px;
}

.tree-el-row {
  padding: 10px 10px 10px 10px;
}

.content-card {
  height: 70vh;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding-right: 18px;
}

.custom-tree-node-span {
  width: 100%;
}

.tree-operation {
  margin-left: 10px;
}
</style>

<style lang="scss" scoped>
.main-scrollbar {
  height: calc(100vh - 360px);
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--el-text-color-regular);
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}
</style>
